<template>
  <div class="home">
    <div v-if="store.superUser === 0" class="tool-btn">
      <n-button type="primary" @click="openPage('module')"> 编辑 </n-button>
    </div>
    <div v-if="token" class="content">
      <!-- 长方形标题 -->
      <div v-for="(item, i) in temFilter" :key="i" class="title-cart">
        <div class="cart-title-font">
          <div>{{ item.parent.name }}</div>
        </div>
        <vuedraggable :sort="false" v-model="item.models" item-key="index">
          <template #item="{ element }">
            <div
              class="cart-item-rectangle"
              :style="{ backgroundColor: colorArray[i % colorArray.length] }"
              @click="openPageFun(element)"
            >
              <img
                class="cart-icon"
                v-if="element.picture"
                :src="element.picture"
                alt=""
              />
              <icons v-else class="cart-icon" name="letterA" />
              <div class="cart-txt">{{ element.modelName }}</div>
            </div>
          </template>
        </vuedraggable>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import vuedraggable from "vuedraggable";
import { useAppStore } from "@/store/modules/user";
import { tmpStore } from "@/store/modules/template";
import { GetPageModelByToken, GetModuleType } from "@/server";
const templateData = ref([]) as any;
const router = useRouter();
const store = useAppStore();
const tempplate = tmpStore();
const token = computed(() => store.token);
const modelId = ref(0); //模块id
const colorArray = ["#2F9832", "#01C0E4", "#EE9708", "#02A8AE"];
const temFilter = computed(() => {
  const list = templateData.value
    .map((e: any) => {
      const parent = e.parent;
      const child = e.models.filter((c: any) => {
        if (c.isVisibleHomePage) {
          return c;
        }
      });
      return {
        parent: parent,
        models: child,
      };
    })
    .filter((e: any) => e.parent.isVisibleHomePage);
  return list;
});
/**
 * @description: 获取模块应用类型列表
 * @return {*}
 * @author: cool panda
 */
const openPageFun = async (item: any) => {
  let path = item.moduleType;
  if (item.applicationType === "DataSheet" && path !== "B1") {
    path = "B2";
  }
  let url = path + "/" + item.id;
  if (path === "B2") {
    const houzui = item.remark ? "/" + item.remark : "/1";
    url = url + "/" + item.moduleType + houzui;
  }
  openPage(url);
};
const openPage = (path: string) => {
  if (path === "module") {
    if (modelId.value > 0) {
      router.push("/Module/" + modelId.value);
    } else {
      router.push("/templateManage");
    }
  } else {
    router.push("/" + path);
  }
};
/**
 * @description: 获取模版信息
 * @return {*}
 * @author: cool panda
 */
const GetPageModelByTokenFun = async () => {
  const res: any = await GetPageModelByToken({});
  if (res.result.isSuccess) {
    templateData.value = res.result.result;
    if (res.result.result.length > 0) {
      modelId.value = res.result.result[0].parent.moduleId;
    } else {
      modelId.value = 0;
    }
    tempplate.setMnue(res.result.result);
  } else {
    store.error(res.result.message); // 错误提示
  }
};
onMounted(() => {
  GetPageModelByTokenFun();
});
</script>
<style lang="less" scoped>
// /deep/ .n-radio .n-radio__dot::before {
//   background: #01c0e4 !important;
// }

.model-dialog {
  .label-item {
    &.upload {
      height: auto;
      align-items: flex-start;
    }
    display: flex;
    align-items: center;
    height: 35px;
    margin-bottom: 20px;
    .label-name {
      width: 110px;
      font-size: 16px;
      margin-right: 20px;
      text-align: right;
    }
    .label-input {
      flex: 1;
      .desc {
        margin-top: 15px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #d8d8d8;
        line-height: 17px;
      }
      :deep(.n-input) {
        --n-color: #60676c !important;
        --n-color-focus: #60676c !important;
      }
      :deep(.n-radio) {
        --n-color-active: #1677ff !important;
        --n-dot-color-active: #fff !important;
        --n-box-shadow-active: inset 0 0 0 1px #1677ff !important;
        --n-box-shadow-hover: inset 0 0 0 1px #1677ff !important;
      }
      :deep(.n-radio__label) {
        --n-text-color: #fff !important;
      }
      :deep(.n-base-selection) {
        --n-color: #60676c !important;
        //   --n-color-focus: #60676c !important;
        //   --n-placeholder-color: red !important;
        --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
        --n-border-hover: 1px solid #02a8ae !important;
        --n-border-focus: 1px solid #02a8ae !important;
        --n-border-active: 1px solid #02a8ae !important;
        --n-text-color: #fff !important;
        --n-color-active: #60676c !important;
      }
    }
    .switch {
      display: flex;
      align-items: center;
      margin: 10px;
      span {
        padding-right: 10px;
      }
      :deep(.n-switch.n-switch--active .n-switch__rail) {
        background-color: #01c0e4 !important;
      }
    }
  }
  .add-view {
    margin: 40px 0 20px;
    .add-btn {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
      width: 100px;
      height: 36px;
      background: #01c0e4;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08),
        0px 2px 5px 0px rgba(25, 15, 15, 0.07),
        0px 5px 8px 0px rgba(0, 0, 0, 0.05);
    }
  }
  :deep(.n-input) {
    --n-color: #60676c !important;
    --n-color-focus: #60676c !important;
    --n-text-color: rgb(255, 255, 255) !important;
    --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
    --n-border-hover: 1px solid #02a8ae !important;
    --n-border-focus: 1px solid #02a8ae !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
  :deep(.n-upload) {
    --n-dragger-color: #60676c !important;
    --n-dragger-border-hover: 1px dashed rgba(2, 168, 174, 1) !important;
  }
  :deep(.n-base-selection) {
    --n-color: #60676c !important;
    //   --n-color-focus: #60676c !important;
    //   --n-placeholder-color: red !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
    --n-border-hover: 1px solid #02a8ae !important;
    --n-border-focus: 1px solid #02a8ae !important;
    --n-border-active: 1px solid #02a8ae !important;
    --n-text-color: #fff !important;
    --n-color-active: #60676c !important;
  }
}
.home {
  width: 100%;
  height: 100%;
  color: #fff;
  .tool-btn {
    padding: 0 30px;
    display: flex;
    justify-content: flex-end;
    .btn {
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 12px;
      width: 80px;
      height: 30px;
      background: #ee9708;
      box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
        0px 1px 3px 0px rgba(25, 15, 15, 0.07),
        0px 3px 5px 0px rgba(0, 0, 0, 0.05);
    }
  }

  .sort {
    display: flex;
    padding-right: 40px;
    justify-content: end;
    margin-top: 15px;

    .sort-txt {
      &.cancle {
        background: #ffffff;
        margin-right: 10px;
        color: #000;
      }
      &.yellow {
        background: #ee9708;
      }
      cursor: pointer;
      width: 100px;
      height: 36px;
      line-height: 36px;
      background-color: #01c0e4;
    }
  }
  .content {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 24px;
    padding: 40px 100px 0;
    // margin-left: 107px;
    .title-cart {
      margin-right: 50px;
      flex: 1;
      max-width: 370px;
      min-width: 200px;
    }

    .cart-title-font {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 35px;
      line-height: 35px;
      margin-bottom: 20px;
    }

    .cart-title {
      &:hover {
        border: 1px solid #ffffff;
      }
      transition: border 0.3s;
      cursor: pointer;
      width: 200px;
      height: 40px;
      line-height: 40px;
      margin-bottom: 15px;
      border: 1px solid #979797;
    }

    // 正方形卡片
    .cart-item-square {
      width: 200px;
      height: 200px;
      margin-bottom: 40px;
    }

    // 长方形卡片
    .cart-item-rectangle {
      &:hover {
        opacity: 0.7;
      }
      cursor: pointer;
      transition: opacity 0.3s;
      position: relative;
      width: 100%;
      height: 200px;
      margin-bottom: 40px;
      &:hover {
        .mask-view {
          opacity: 1;
        }
      }
      .mask-view {
        opacity: 0;
        transition: opacity 0.3s;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(3px);
        display: flex;
        justify-content: center;
        align-items: center;
        .edit-view {
          display: flex;
          justify-content: center;
          align-items: center;
          .del {
            cursor: pointer;
            width: 66px;
            height: 24px;
            background: #ee2908;
            box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
              0px 1px 3px 0px rgba(25, 15, 15, 0.07),
              0px 3px 5px 0px rgba(0, 0, 0, 0.05);
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 22px;
            margin-right: 20px;
          }
          .edit {
            cursor: pointer;
            width: 66px;
            height: 24px;
            background: #01c0e4;
            box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
              0px 1px 3px 0px rgba(25, 15, 15, 0.07),
              0px 3px 5px 0px rgba(0, 0, 0, 0.05);
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 22px;
          }
        }
      }
    }

    .cart-icon {
      width: 76px;
      height: 76px;
      object-fit: contain;
      margin: 55px 0 30px 0;
    }

    .cart-txt {
      font-size: 16px;
      text-align: left;
      margin-left: 15px;
    }

    .bg-green {
      background: #2f9832;
    }

    .bg-yellow {
      background: #ee9708;
    }

    .bg-blue {
      background: #01c0e4;
    }
  }
}
.del-dialog {
  // width: 700px;
  .title-font {
    font-size: 24px;
    color: #02a8ae;
  }
  .notice-info {
    display: flex;
    justify-content: center;
    font-size: 24px;
    margin: 60px 0;
  }
  .footer {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    .btn {
      width: 100px;
      height: 36px;
      font-size: 18px;
      color: #fff;
      margin-right: 30px;
    }
    .btn-border {
      border: 1px solid #fff;
    }
    .btn-bg {
      background: #ee2908;
    }
  }
}
.sortable-chosen {
  // background: #4beb89 !important;
  opacity: 0.6;
  /* 添加其他样式属性 */
}
.sortable-drag {
  background: #4beb89;
  opacity: 0.4;
  /* 添加其他样式属性 */
}
</style>
